<template>
	<view style="padding: 20rpx;">
		<view class="box">
			选购商品：<view v-for="item in ordersItemList" :key="item.id">
				<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin: 40rpx;">
					<view>{{ item.goodsName }} </view>
					</view>
			</view>
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="140rpx" label-align="right">
				<uni-forms-item label="内容" name="content" required>
					<uni-easyinput type="textarea" v-model="form.content" placeholder="请输入内容" />
				</uni-forms-item>

				<uni-forms-item label="评分" name="star">
					<uni-rate v-model="form.star" style="position: relative; top: 16rpx;" />
				</uni-forms-item>
				<uni-forms-item>
					<button type="primary" size="mini" @click="save">提交评价</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				orders: {},
				ordersItemList:[],
				rules: {
					content: {
						rules: [{
							required: true,
							errorMessage: '请填写评价内容',
						}]
					},
					star: {
						rules: [{
							required: true,
							errorMessage: '请评分',
						}]
					}

				}
			}
		},
		async onLoad(option) {
			this.form.orderId = option.orderId
			await this.load(this.form.orderId)
			
		},
		methods: {
			save() {
				// 验证
				this.$refs.formRef.validate().then(res => {
					this.$request.post('/comment/add', this.form).then(res => {
						if (res.code === '200') {
							uni.navigateBack()
							uni.showToast({
								title: '评价提交成功'
							})
							

						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			async  load(orderId) {
		
				await this.$request.get('/ordersItem/selectAll', {
						orderId: orderId
					}).then(res => {
						this.ordersItemList = res.data || []
						console.log(this.ordersItemList[0])
					})
					
					
				
				
				}
		}
	}
</script>

<style>

</style>